<template>
	<view class="top-up">
		<common-navbar title="账户充值" />
		<view class="title">
			请选择充值金额：
		</view>
		<view class="amount-list">
			<view class="amount-item" v-for="item,index in amountList" :key="index"
				:class="{'selected':item.is_selected}" @click="selectAmount(item)">
				{{item.amount}}元
			</view>
		</view>
		<view class="other-amount-container">
			<view class="other-amount-label">
				其他金额
			</view>
			<input v-model="otherAmount" class="other-amount-input" @input="onInput" type="number" maxlength="4"
				placeholder="请输入其他充值金额，最低1元" placeholder-style="font-size:24rpx;color:#999999;">
		</view>
		<view class="user-agreement">
			<u-checkbox-group style="width:34rpx;margin-right: 8rpx;">
				<u-checkbox v-model="isAgree" />
			</u-checkbox-group>同意<text class="agreement-name" @click="$u.route('/pages/agreeandservices/servicesAgreement')">《用户服务协议》</text>
		</view>
		<button class="submit-btn" :class="{'disabled':disabled}" :disabled="disabled" @click="topup">立即充值</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: null,
				otherAmount: '',
				isAgree: false,
				amountList: [{
					amount: 50,
					is_selected: false
				}, {
					amount: 100,
					is_selected: false
				}, {
					amount: 300,
					is_selected: false
				}, {
					amount: 500,
					is_selected: false
				}],
			}
		},
		computed: {
			disabled() {
				const selected_amount = this.amountList.find(item => item.is_selected);
				return !((selected_amount || Number(this.otherAmount) >= 1) && this.isAgree);
			}
		},
		onLoad(options) {
			if (options.query) {
				this.order = JSON.parse(JSON.parse(decodeURIComponent(options.query)).order)
				console.log('this.order>>>>>>>>>>>>>>>>>>>>>>',this.order)
			}
		},
		methods: {
			selectAmount(e) {
				for (let item of this.amountList) {
					this.$set(item, 'is_selected', false);
				}
				this.otherAmount = '';
				this.$set(e, 'is_selected', true);
			},
			onInput(e) {
				for (let item of this.amountList) {
					this.$set(item, 'is_selected', false);
				}
				this.$u.debounce(() => {
					console.log(e);
					this.otherAmount = '';
					this.otherAmount = e.target.value.replace(/[^\d]/g, '');
					console.log(this.otherAmount)
				}, 500)
			},
			async topup() {
				const topupAmount = this.amountList.find(item => item.is_selected) ? this.amountList.find(item => item
					.is_selected).amount : this.otherAmount
				const {
					amount,
					task_code
				} = (await this.$u.post(this.$restUrl.topupBalance, {
					amount: topupAmount,
				})).data;
				const {
					data
				} = await this.$u.post(this.$restUrl.getWXPayOptions, {
					task_code,
					amount,
				})
				console.log(data);
				try {
					const res = await this.$wx.WXPay(data);
					this.$showToast('充值成功');
					this.updateUserInfo();
					if (this.order) {
						console.log('order>>>>>>>>>>>>>>>>>>>>>',this.order);
						uni.navigateBack({
							success: (res) => {
								console.log('navigateBacknavigateBacknavigateBacknavigateBacknavigateBack')
								this.updateUserInfo();
								this.$nextTick(() => {
									console.log(getCurrentPages());
									const current_page = getCurrentPages()[getCurrentPages()
										.length - 1];
									if (current_page.$vm.$refs.payBar) {
										current_page.$vm.$refs.payBar.pay(this.order);
									}
								})
							}
						})
					}
				} catch (e) {
					console.log(e)
					this.$u.route(`/pages/order_detail/orderDetail?taskCode=${task_code}`)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./topUp.scss";
</style>
